/*
 * @Descripttion:
 * @version:
 * @Author: hhy
 * @Date: 2021-02-20 09:53:35
 * @LastEditors: hhy
 * @LastEditTime: 2021-02-20 10:29:15
 * @FilePath: \vue3-dome\vue.config.js
 */
"use strict";

const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}
// 去掉 注释 | console.log
const TerserPlugin = require("terser-webpack-plugin");
// 开启 Gzip压缩
const CompressionWebpackPlugin = require("compression-webpack-plugin");

// 修改为开发环境
const isProduction = process.env.NODE_ENV === "production";

// 引入 时间处理库
const dayjs = require("dayjs");

const cbDataPackage = require("./read-package-json");

function _getPackageVersion() {
  return cbDataPackage.version;
}

const cdn = {
  // 开发环境
  dev: {
    css: ["//at.alicdn.com/t/font_1016519_bjo9i781dm.css"],
    js: [],
  },
  // 生产环境
  build: {
    css: ["//at.alicdn.com/t/font_1016519_bjo9i781dm.css"],
  },
};
const port = process.env.port || process.env.npm_config_port || 8888; // dev port
module.exports = {
  publicPath: "/",
  outputDir: "property_admin",
  // 是否生成 .map 文件
  // 放置生成的静态资源 (js、css、img、fonts)目录。
  assetsDir:
    "static-v" + _getPackageVersion() + "." + dayjs().format("YYYYMMDDHHmmss"),
  // 保存检查代码
  lintOnSave: false,
  // lintOnSave: true,
  // 是否生成 .map 文件
  productionSourceMap: !isProduction,
  devServer: {
    port: port,
    open: true,
    port: 8092,
    overlay: {
      warnings: false,
      errors: true,
    },
    // 配置跨域
    // proxy: {
    //   "/web": {
    //     target: "https://i53w431926.zicp.fun",
    //     changeOrigin: true,
    //     rewrite: (path) => path.replace(/^\/web/, "/"),
    //     secure: false,
    //     headers: {
    //       Referer: "https://i53w431926.zicp.fun",
    //     },
    //   },
    // },
  },
  configureWebpack: (config) => {
    const plugins = [];
    if (isProduction) {
      // 打包内容分析工具
      // plugins.push(new BundleAnalyzerPlugin({ analyzerPort: 9528 }));
      // js 压缩
      plugins.push(
        new TerserPlugin({
          terserOptions: {
            compress: {
              // 去掉 console.log
              pure_funcs: ["console.log"],
            },
            output: {
              // 去掉 注释
              comments: false,
            },
          },
        })
      );
      // gzip 压缩
      plugins.push(
        new CompressionWebpackPlugin({
          algorithm: "gzip",
          test: /\.(js|css)$/, // 匹配文件名
          threshold: 10000, // 对超过10k的数据压缩
          deleteOriginalAssets: false, // 不删除源文件
          minRatio: 0.8, // 压缩比
        })
      );

      // 打包时npm包转CDN
      // config.externals = externals;
    }

    return {
      plugins,
    };
  },
  chainWebpack: (config) => {
    config.resolve.alias.set("@", resolve("src"));
    config.resolve.alias.set("style", resolve("src/style"));
    config.resolve.alias.set("assets", resolve("src/assets"));
    config.module
      .rule("image")
      .test(/\.ico$/)
      .use("url-loader")
      .loader("url-loader");

    config.plugin("html").tap((args) => {
      if (process.env.NODE_ENV === "production") {
        args[0].cdn = cdn.build;
      }
      if (process.env.NODE_ENV === "development") {
        args[0].cdn = cdn.dev;
      }
      return args;
    });

    config.plugins.delete("preload");
    config.plugins.delete("prefetch");
  },
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        // 注意：在 sass-loader v8 中，这个选项名(additionalData)是 "prependData"
        prependData: `@import "~@/styles/app.scss"
                      @import "~@/styles/flex.scss"`,
      },
      scss: {
        // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
        prependData: `@import "~@/styles/app.scss";
                      @import "~@/styles/flex.scss";`,
      },
    },
  },
  // 以下是pwa配置
  pwa: {
    iconPaths: {
      favicon32: "./static/favicon_chuzhong.ico",
      favicon16: "./static/favicon_chuzhong.ico",
      appleTouchIcon: "./static/favicon_chuzhong.ico",
      maskIcon: "./static/favicon_chuzhong.ico",
      msTileImage: "./static/favicon_chuzhong.ico",
    },
  },
};
